{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<section class="section">
  <div class="container is-widescreen">
    {{#if (and (eq this.model.drMode "secondary") (eq this.model.drModeInit "primary"))}}
      <LayoutLoading />
    {{else}}
      {{#if this.model.replicationAttrs.replicationEnabled}}
        <PageHeader as |p|>
          <p.top>
            <nav class="key-value-header breadcrumb" aria-label="breadcrumbs">
              <ul>
                <li>
                  <LinkTo @route="index">
                    <span class="sep" data-test-replication-breadcrumb></span>
                    Replication
                  </LinkTo>
                </li>
                <li>
                  <span class="sep"></span>
                  {{this.model.replicationModeForDisplay}}
                </li>
              </ul>
            </nav>
          </p.top>
          <p.levelLeft>
            <h1 class="has-top-margin-m title is-3" data-test-replication-title={{true}}>
              {{this.model.replicationModeForDisplay}}
              <span class="tag is-light has-text-grey-dark" data-test-replication-mode-display={{true}}>
                {{this.model.replicationAttrs.modeForHeader}}
              </span>
            </h1>
          </p.levelLeft>
        </PageHeader>
        <div class="tabs-container box is-bottomless is-fullwidth is-paddingless is-marginless">
          <nav class="tabs sub-nav" aria-label="tab navigation">
            <ul>
              <LinkTo @route="mode.index" @model={{this.replicationMode}} data-test-replication-link="details">
                Details
              </LinkTo>
              <LinkTo @route="mode.manage" @model={{this.replicationMode}} data-test-replication-link="manage">
                Manage
              </LinkTo>
              {{#if this.model.replicationAttrs.isPrimary}}
                <LinkTo @route="mode.secondaries" @model={{this.replicationMode}} data-test-replication-link="secondaries">
                  Secondaries
                </LinkTo>
              {{/if}}
            </ul>
          </nav>
        </div>
      {{/if}}
      {{outlet}}
    {{/if}}
  </div>
</section>